<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="岗位分类">
          <el-select v-model="queryParams.postCategory" placeholder="请选择岗位分类">
            <el-option
              v-for="dict in dict.type.sys_post_category"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位类型">
          <el-select v-model="queryParams.postType" placeholder="请选择岗位类型">
            <el-option
              v-for="dict in dict.type.sys_post_type"
              :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 岗位列表 -->
    <div class="post-list">
      <div class="top-operation">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="postList"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="postName"
          label="岗位名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="postCategory"
          label="岗位分类"
          align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_post_category" :value="scope.row.postCategory"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="postType"
          label="岗位类型"
          align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_post_type" :value="scope.row.postType"/>
          </template>
        </el-table-column>

        <el-table-column
          prop="validDate"
          label="有效时间"
          align="center"
          width="180">
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)">修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listPost, getPost, delPost } from "@/api/system/post";
import { listShift } from "@/api/system/shift";

export default {
  name: "PatrolManagement",
  components: {
    Pagination: () => import("@/components/Pagination")
  },
  dicts: ['sys_post_category', 'sys_post_type', 'sys_exec_mode', 'sys_normal_disable', 'sys_shift_type'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postName: undefined,
        postCategory: undefined,
        postType: undefined,
        execMode: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询岗位列表 */
    async getList() {
      this.loading = true;
      try {
        const response = await listPost(this.queryParams);
        this.postList = response.rows;
        this.total = response.total;

        // 获取每个岗位的班次信息
        for (let post of this.postList) {
          const shiftParams = {
            postId: post.id,
            pageSize: 100 // 获取所有班次
          };
          const shiftResponse = await listShift(shiftParams);
          post.shifts = shiftResponse.rows;
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$modal.msgError("获取数据失败");
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({ path: '/patrol/post', query: { mode: 'add' }});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({ path: '/patrol/post', query: { mode: 'edit', id: row.id }});
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.$router.push({ path: '/patrol/post', query: { mode: 'detail', id: row.id }});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除岗位编号为"' + row.id + '"的数据项？').then(async () => {
        try {
          await delPost(row.id);
          this.getList();
          this.$modal.msgSuccess("删除成功");
        } catch (error) {
          console.error('删除失败:', error);
          this.$modal.msgError("删除失败");
        }
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-bar {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .post-list {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;

    .top-operation {
      margin-bottom: 20px;
    }
  }
}
</style>
